<template>
<div class="box">
  <div id="hot"></div>
  <form @submit.prevent="jumpToRow">
    <label for="rowNum">Input row number:</label>
    <input type="number" id="rowNum" v-model="jumpRowNum">
    <button type="submit">Jump to Row</button>
  </form>
</div>
</template>

<script>
import Handsontable from 'handsontable';
import "handsontable/dist/handsontable.css";

export default {
  data() {
    return {
      hot: null,
      jumpRowNum: null
    };
  },
  mounted() {
    const container = document.getElementById('hot');
    const data = [
      [1, 'John Smith', 'London'],
      [2, 'Jane Johnson', 'Paris'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
      [3, 'Bob Anderson', 'New York'],
    ];
    const hot = new Handsontable(container, {
      data: data,
      colHeaders: ['ID', 'Name', 'City'],
      rowHeaders: true,
      columns: [
        { data: 0 },
        { data: 1 },
        { data: 2 }
      ],
        licenseKey: "non-commercial-and-evaluation", // for non-commercial use only
    });
    this.hot = hot;    // 更新表格的宽度和高度
    this.hot.updateSettings({
      width: 800,
      height: 400,
    });
  },
  methods: {
    jumpToRow() {
      if (this.jumpRowNum > 0 && this.jumpRowNum <= this.hot.countRows()) {
        // 定位到指定行
        this.hot.scrollViewportTo(this.jumpRowNum - 1, 0);
        this.hot.selectCell(this.jumpRowNum - 1, 0);
      }
    }
  }
};
</script>